import { CaptchaAPI, LoginAPI } from '@/request/api';
import { Button, Input, message, Space } from 'antd';
import 'antd/dist/antd.css';
import React, { ChangeEvent, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.scss';
import initLoginBg from './init';
import './login.less';
export default function Login() {
  const navigate = useNavigate();
  // 加载完这个组件之后,加载背景
  useEffect(() => {
    initLoginBg();
    window.onresize = function () { initLoginBg() };
    getCatchImg()
  }, []);

  const [usernameVal, setUsernameVal] = useState('');
  const [passwordVal, setPasswordVal] = useState('');
  const [captchVal, setCaptchVal] = useState('');
  // 定义一个变量保存验证码图片信息
  const [captchaImg, setCaptchaImg] = useState("");
  const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log('eee--', e.target.value);
    setUsernameVal(e.target.value)
  }

  const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log('eee--', e.target.value);
    setPasswordVal(e.target.value)
  }

  const captchChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log('eee--', e.target.value);
    setCaptchVal(e.target.value)
  }

  const getCatchImg = async () => { // 基地址的问题,接口不通
    // alert(123)
    // CaptchaAPI().then(res => {
    //   console.log('res---', res);
    // })

    const res = await CaptchaAPI();
    if (res.code === 200) {
      // 1、把图片数据显示在img上面
      setCaptchaImg("data:image/gif;base64," + res.img)
      // 2、本地保存uuid，给登录的时候用
      localStorage.setItem("uuid", res.uuid)
    }
  }

  const handleLogin = async () => {
    if (!usernameVal.trim() || !passwordVal.trim() || !captchVal.trim()) {
      message.warning('请输入完整信息');
      return
    }
    // 发起登录请求
    const params = {
      username: usernameVal,
      password: passwordVal,
      code: captchVal,
      uuid: localStorage.getItem('uuid') as string,
    }
    const res = await LoginAPI(params);
    console.log(res);
    // 1.提示登录成功
    message.success('登录成功');
    // 2.保存token 
    localStorage.setItem('lege-react-management-token', res.token);
    // 3.跳转到'/page1'
    navigate('/page1');
    // 4. 删除本地存储的uuid
    localStorage.removeItem('uuid');

  }
  return (
    <div className={styles.loginPage}>
      {/* 存放背景 */}
      <canvas id='canvas' style={{ display: 'block' }}></canvas>
      {/* 登录盒子 */}
      <div className={styles.loginBox + " loginbox"}>
        {/* 标题部分 */}
        <div className={styles.title}>
          <h1>前端&nbsp;·&nbsp;通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        {/* 表单部分 */}
        <Space direction="vertical" size="large" style={{ display: 'flex' }}>
          <Input placeholder="用户名" onChange={usernameChange} />
          <Input.Password placeholder="密码" onChange={passwordChange} />
          <div className="captchabox">
            <Input placeholder="验证码" onChange={captchChange} />
            <div className="captchaImg" onClick={getCatchImg}>
              <img height="38" src={captchaImg} alt="" />
            </div>
          </div>
          <Button type="primary" className="loginBtn" block onClick={handleLogin}>登录</Button>
        </Space>
      </div>
    </div>
  )
}
